<template>
  <!-- 使用el-dialog组件，设置标题、是否可见、点击遮罩层是否关闭、打开时触发openFun方法 -->
  <el-dialog :title="title" :visible.sync="visible" :close-on-click-modal="false" @opened="openFun">
    <!-- 使用el-form组件，设置表单数据、验证规则、表单项宽度 -->
    <el-form :model="userForm" :rules="rules" ref="userRef" label-width="120px">
      <!-- 隐藏的表单项，用于存储用户id -->
      <el-form-item v-show="false" prop="id">
        <el-input v-model="userForm.id"></el-input>
      </el-form-item>
      <!-- 用户名表单项 -->
      <el-form-item label="用户名" prop="username">
        <el-input v-model="userForm.username" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <!-- 昵称表单项 -->
      <el-form-item label="昵称" prop="nickName">
        <el-input v-model="userForm.nickName" placeholder="请输入昵称"></el-input>
      </el-form-item>
      <!-- 用户角色表单项 -->
      <el-form-item label="用户角色" prop="roleIds">
        <!-- 使用el-select组件，设置多选、占位符 -->
        <el-select v-model="userForm.roleIds" multiple placeholder="请选择角色">
          <!-- 使用el-option组件，遍历角色列表，设置标签和值 -->
          <el-option v-for="(item, index) in roleList" :key="index" :label="item.roleName" :value="parseInt(item.id)"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <!-- 底部按钮 -->
    <span slot="footer">
      <!-- 重置按钮，点击时调用resetForm方法 -->
      <el-button @click="resetForm('userRef')">重置</el-button>
      <!-- 确定按钮，点击时调用submitUser方法 -->
      <el-button type="primary" :loading="isLoading" @click="submitUser('userRef')">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
// 引入编辑用户接口、获取角色列表接口、消息提示方法、表单重置方法
import {editUser} from "../../api/user/sysUser";
import {getRoleList} from "../../api/role/sysRole";
import {errorMsg, successMsg} from "../../utils/message";
import {resetForm} from "../../utils/common";
export default {
  name: "editUser",
  props: {
    // 是否可见
    dialogVisible: {
      type: Boolean,
      require: true,
      default: false
    },
    // 用户对象
    userObj: Object
  },
  computed: {
    // 计算属性，用于双向绑定dialogVisible
    visible: {
      get: function () {
        return this.dialogVisible
      },
      set: function (val) {
        this.$emit('update:dialogVisible', val)
      }
    }
  },
  data(){
    return{
      // 标题
      title: '新增',
      // 是否加载中
      isLoading: false,
      // 表单数据
      userForm: {
        id: null,
        username: '',
        nickName: '',
        roleIds: []
      },
      // 验证规则
      rules: {
        username: [{required: true, message: '用户名不能为空', trigger: 'blur'}],
        nickName: [{required: true, message: '用户昵称不能为空', trigger: 'blur'}],
        roleIds: [{required: true, message: '用户角色不能为空', trigger: 'change'}]
      },
      // 角色列表
      roleList: []
    }
  },
  methods: {
    // 重置表单
    resetForm,
    // 打开对话框时触发
    openFun(){
      // 如果有用户id，则获取角色列表，设置标题为编辑，将用户对象赋值给表单数据，将roleIds中的字符串数字转化为数字
      if (this.userObj.id){
        this.getRoleList()
        this.title = '编辑'
        this.userForm = this.userObj
        this.userForm.roleIds = this.userForm.roleIds[0].split(',')
        //  将roleIds中的字符串数字转化为数字
        this.userForm.roleIds = this.userForm.roleIds.map(Number)
      }
      // 获取角色列表
      this.getRoleList()
    },
    // 获取角色列表
    getRoleList() {
      getRoleList({}).then(res => {
        if (res.success){
          this.roleList = res.data
        } else {
          errorMsg(res.msg)
        }
      })
    },
    // 提交表单
    submitUser(formName){
      // 验证表单
      this.$refs[formName].validate((valid) => {
        if (valid){
          // 设置加载中
          this.isLoading = true
          // 调用编辑用户接口
          editUser(this.userForm).then(res => {
            if (res.success){
              // 提示成功信息
              successMsg(res.data)
              // 关闭对话框
              this.visible = false
              // 触发父组件的get-list方法
              this.$emit('get-list')
            } else {
              // 提示错误信息
              errorMsg(res.msg)
            }
            // 取消加载中
            this.isLoading = false
          })
        }
      })
    }
  }
}
</script>

<style scoped>
 ::v-deep .vue-treeselect__control{
  height: 28px;
}
 ::v-deep .el-form-item__content{
   line-height: 28px;
   font-size: 12px;
 }
</style>